<template>
  <div class="form-warp">
    <form class="login">
      <p class="login-register">
        没有账号吗?
        <router-link class="router-link" :to="{name:'Register'}">注册</router-link>
      </p>
      <h2>登录</h2>
      <div class="inputs">
        <div class="input">
          <input type="text" placeholder="邮箱" v-model="email">
          <Email class="icon"/>
        </div>
        <div class="input">
          <input type="password" placeholder="密码" v-model="password">
          <Password class="icon"/>
        </div>
      </div>
      <div v-show="error" class="error">
        {{ this.errorMsg }}
      </div>
      <router-link class="forgot-password" :to="{name: 'ForgotPassword'}"> 忘记密码？</router-link>
      <button @click.prevent="signIn">登录</button>
      <div class="angle"></div>
    </form>
    <div class="background">

    </div>
  </div>
</template>

<script>
import Email from '../assets/Icons/envelope-regular.svg'
import Password from '../assets/Icons/lock-alt-solid.svg'
import { login } from '@/api/user'
export default {
  name: 'Login',
  components: { Email, Password },
  data(){
    return {
      email: "",
      password: "",
      error:"",
      errorMsg:""
    }
  },
  methods:{
    async signIn() {
      let user = {
        user: {
          email:this.email,
          password:this.password
        }
      }
      try {
        const { data } = await login(user)
        this.errorMsg = false
        this.error = false
        this.$store.commit('setUser',data)
        this.$store.dispatch("getPost")
        this.$router.push({ name: "Home" });
      } catch (error) {
        this.error = true
        this.errorMsg = error.response.data.errors[0].msg
        return
      }
    }
  }
}
</script>

<style lang="scss">
.form-warp{
  overflow: hidden;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-self: center;
  margin: 0 auto;
  width: 90%;
  @media(min-width: 900px){
    width: 100%;
  }
  .login-register{
    margin-bottom: 32px;
    .router-link{
      color: #000;
    }
  }
  form{
    padding: 0 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    @media(min-width: 900px){
      padding: 0 50px;
    }
    h2{
      text-align: center;
      font-size: 32px;
      color: #303030;
      margin-bottom: 40px;
      @media(min-width: 900px){
        font-size: 40px;
      }
    }
    .inputs{
      width: 90%;
      max-width: 350px;
      .input{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px;
        input{
          width: 100%;
          border: none;
          background-color: #f2f7f6;
          padding: 4px 4px 4px 30px;
          height: 50px;
          &:focus {
            outline: none;
          }
        }
        .icon{
          width: 12px;
          height: 12px;
          position: absolute;
          left: 6px;
        }
      }
    }

    .forgot-password{
      text-decoration: none;
      color: #000;
      cursor: pointer;
      font-size: 14px;
      margin: 16px 0 32px;
      border-bottom: 1px solid transparent;
      transition: 0.5s ease all;
      &:hover{
        border-color: #303030;
      }
    }

    .angle{
      display: none;
      position: absolute;
      background-color: #fff;
      transform: rotateZ(3deg);
      width: 60px;
      right: -30px;
      height: 101%;
      @media(min-width:900px){
        display: initial;
      }
    }
  }
  .background{
    display: none;
    flex: 2;
    background-size: cover;
    background-image: url("../assets/background.png");
    width: 100%;
    height: 100%;
    @media(min-width:900px){
      display: initial;
    }
  } 
}
</style>